<template>

 <div>
        <h2>ref的数据响应式</h2>
        <p>{{name}}</p>
        <button @click="chang()">修改</button>
        <p>{{count}}</p>
        <button @click="add()">count++</button>

 </div>
</template>

<script>
// 导入 reactive
import {reactive} from 'vue'

import {ref} from 'vue'

export default {

  /* 
  reactive的响应式数据
  直接修改是不会进行响应式的数据的
  响应式数据的定义：
  1、先引入 reactive
  2、通过 reactive 定义响应式数据
  3、return 返回数据
  */


 /* 
 ref函数，用于简单的数据类型定义为 响应式数据
 在修改值得和获取值得时候 通过 .value来获取

 */

  name: 'App',
  // setup 函数是 vue3 中专门为组件提供的新属性。 统一的入口
  // 他是在生命周期beforecreate之前触发的 ，所以不能拿到this,也就是说无法使用data和 methods数据和方法
  setup() {
      // ref
  let name = ref('张三')
  
  const chang = ()=>{
    name.value = '李四'
  }

  let count = ref(0)
  const add =()=>{
    count.value++
  }
    //　在setup中定义的属性和方法是需要 return 出去的，这样我们就可以在模板中直接访问对象的属性和方法了
    return {
      chang,name,
      count,
      add
    }
  },
 
  beforeCreate(){
    console.log("运行了 beforCreate");
    
  }
}
</script>
